<template>
    <form @submit.prevent="register">
        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input v-model="username" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input v-model="password" type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">确认密码</label>
            <input v-model="confirmedpassword" type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="error-message" style="color: red;">{{ error_message }}</div>
        <div><button type="submit" style="flex: auto;margin-top: 10px; width:100%" class="btn btn-primary">注册</button></div>
    </form>
</template>

<script>
import router from '@/router';
import { ref } from 'vue'
import $ from 'jquery'
export default {
    setup() {
        let username = ref("");
        let password = ref("");
        let confirmedpassword = ref("");
        let error_message = ref("");

        const register = () => {
            $.ajax({
                url: "http://127.0.0.1:3600/user/account/register/",
                type: "post",
                data: {
                    username: username.value,
                    password: password.value,
                    confirmedpassword: confirmedpassword.value,
                },
                success(resp) {
                    if (resp.message === "successed")
                        console.log(resp)
                    router.push({ name: 'LoginView' });
                },
                error(resp) {
                    console.log(resp)
                    error_message = resp.error
                }
            })
        }
        return {
            username,
            password,
            confirmedpassword,
            error_message,
            register,

        }

    }
}
</script>

<style></style>